import { Component, Input, TemplateRef, ContentChild, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { getO } from '../../../utils/utils';

@Component({
  selector: 'apes-panel',
  template: `
    <apes-card style="margin: 0 4px;border-radius: 4px;" [apesTitle]="_title"
               [ngClass]="{'boxHeight': _boxHeight == true}" [apesBordered]="_border"
               [apesBodyStyle]="_bodyStyle" [ngStyle]="{height: _height}">
      <ng-content></ng-content>
    </apes-card>
  `,
  host: {},
})

export class ApesPanelComponent implements OnDestroy, OnInit {

  public _title: string;
  public _border = false;
  public _height;
  public _boxHeight = false;

  public _bodyStyle = { padding: '8px 0 0' }; // 无法批量隐藏框 overflowX: 'auto' ,overflowY: 'hidden'

  @Input()
  set bodyStyle(value: any) {
    if (value) {
      this._bodyStyle = getO(value);
    }
  }

  get bodyStyle() {
    return this._bodyStyle;
  }


  @Input()
  set border(value: boolean) {
    this._border = value;
  }

  @Input()
  set title(value: string) {
    this._title = value;
  }

  get title() {
    return this._title;
  }

  @Input()
  set height(value) {
    this._height = (value - 16) + 'px';
  }

  get height() {
    return this._height;
  }

  @Input()
  set boxHeight(value: any) {
    if (value) {
      this._boxHeight = true;
    }
  }

  get boxHeight() {
    return this._boxHeight;
  }

  @ContentChild(TemplateRef, { static: false }) content: TemplateRef<void>;

  constructor() {
  }

  ngOnInit(): void {
    // this._height = document.querySelector('.content').clientHeight;
  }

  ngOnDestroy(): void {
  }
}
